<template>
    <a-modal  :width='450'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    >
      <a-form  :form='form'>
        <a-form-item label='所属部门' :label-col='{ span : 5}'  :wrapper-col="{ span : 16 }" >
            <a-select   v-decorator="['officeCode',baseInit.officeCode]">
              <a-select-option  v-for='(item,index)  in  departData'  :key='index'  :value="item.code">{{item.name}}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item label='姓名'     :label-col='{ span : 5}'   :wrapper-col="{ span : 16 }" >
            <a-input   v-decorator="['name' , baseInit.name   ]"  />
        </a-form-item>
        <a-form-item label='登录名'   :label-col='{ span : 5}'   :wrapper-col="{ span : 16 }" >
            <a-input   v-decorator="['loginName' , baseInit.loginName]"  />
        </a-form-item>
        <a-form-item label='登录密码' :label-col='{ span : 5}'   :wrapper-col="{ span : 16 }" >

            <a-input   v-decorator="['loginPassword' , baseInit.loginPassword]"   v-if='!modalProps.isEdit || showPass'  type='password'>
              <a-tooltip slot="suffix" title="取消"  v-if='showPass'  >
                  <a-icon  type="close-circle"  @click='showPass = false'/>
              </a-tooltip>
            </a-input>
            <a-button  type='primary'  v-else  @click='showPass = true'> 修改 </a-button>

        </a-form-item>
        <a-form-item label='电话'     :label-col='{ span : 5}'   :wrapper-col="{ span : 16 }" >
            <a-input   v-decorator="['mobile' , baseInit.mobile ]"/>
        </a-form-item>
        <a-form-item label='角色'     :label-col='{ span : 5}'   :wrapper-col="{ span : 16 }" >
            <a-select  mode="multiple"  v-decorator="['roles',baseInit.roles]">
              <a-select-option  v-for='(item,index)  in  roleData'  :key='item.code'>{{item.name}}</a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item  style='display: none;' >
            <a-input    v-decorator="['code' , baseInit.code]"/>
        </a-form-item>
      </a-form>
    </a-modal>
</template>

<script>
  import  {  submitAddUser , RoleList , UserDetail  }  from  '@/api/system/index'
export default {
  name: 'addUser',
  props:{
      visible:{
        type:Boolean,
        default:false
      },
      /*部门选择 option*/ 
      departData:{
        type:[Object,Array],
        default:()=>[]
      },
      roleData:{
        type:[Object,Array],
        default:()=>[]
      }
  },
  data () {
    return {
      modalProps:{
          title:'',
          isEdit:false, /*表单进入状态*/
      },
      confirmLoading: false, 
      showPass:false,/*是否显示修改密码*/
      /*form 初始值*/
      baseInit:{
        code:{initialValue:''},/*隐藏input里加上code*/
        officeCode:{ initialValue :'' , rules: [{required:true,message:'请选择所属部门'}]},
        name:{ initialValue :'' , rules : [{ required : true , message : '请输入用户姓名' }]},
        loginName:{ initialValue :'' , rules : [{ required : true , message : '请输入' }]},
        loginPassword:{ initialValue :'' , rules : [{ required : true , message : '请输入' }]},
        mobile:{ initialValue :''},
        address:{ initialValue :''},
        roles:{ initialValue:[],rules : [{ required : true , message : '请选择用户角色' }]}
      },  
                                                                                      
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){ 

  },
  methods:{ 
     handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //submit
    handleOk(e) {
      let that = this
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            
            values.roles = this.RequireCodeToSub(values.roles)
            this.confirmLoading = true;
            let url 
            if(that.modalProps.isEdit == false){
                url ='/sys/user/create_user' //新增 用户
            }
            else{
              url = '/sys/user/modify_user' //修改 用户
            }
            submitAddUser(url,values).then((res)=>{
              that.confirmLoading = false;
              that.$message.info(res.data.msg)
              that.$emit('handleOk')
            })
            .catch((err)=>{
              that.confirmLoading = false;
            })
          }
          else{
            console.log(err)
          }
        });
    },
  },
 
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){
        this.modalProps.isEdit = false
        this.modalProps.title = '添加用户'
        this.showPass =false
        /*清空表单输入和校验*/
        this.form.resetFields()
        /*设置默认值*/
        this.baseInit.code.initialValue = ''
        this.baseInit.officeCode.initialValue = 'root'
        this.baseInit.name.initialValue = ''
        this.baseInit.loginName.initialValue = ''
        this.baseInit.loginPassword.initialValue = ''
        this.baseInit.loginPassword.rules = [{required:true,message:'请输入'}]
        this.baseInit.mobile.initialValue = ''
        this.baseInit.address.initialValue = ''
        this.baseInit.roles.initialValue = []
      })
      this.$on('editDialog',async function(code){
        this.modalProps.isEdit = true
        this.modalProps.title = '编辑用户'

        this.showPass = false
        /*清空表单输入和校验*/
        this.form.resetFields()
        await UserDetail(code).then((res)=>{ 
          let data = res.data.data
            /*设置默认值*/
            this.baseInit.code.initialValue = data.code
            this.baseInit.officeCode.initialValue = data.officeCode
            this.baseInit.name.initialValue = data.name
            this.baseInit.loginName.initialValue = data.loginName
            this.baseInit.loginPassword.initialValue = ''
            this.baseInit.loginPassword.rules = [{required:false,message:''}]
            this.baseInit.mobile.initialValue = data.mobile

            this.baseInit.roles.initialValue = this.Recontent_fromcode(data.roles)
            // console.log(this.baseInit)
        }) 
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
